<template>
 
    <div class="second_level_page integral_record_page">
      
        <div class="record_box" >
           
         <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" class="ir_scroll">
            <ul v-for="(account,index) in accountlist" >
                <li>
                        <div class="time"><span>{{account.createTime | formateDate}}
                        </span></div>
                    <div class="bill_box">   
                       
                        <div class="top">{{accountType(account.type)}}</div>
                        
                        <div class="middle">
                            <h2>本金</h2>
                            <p>￥{{account.amount}}</p>
                        </div>
                        <div class="sm clear"><span class="left">奖励金</span><span class="right">￥{{account.rewordAmount || 0}}</span></div>
                        <div class="bottom clear"><span class="left">久币数量</span><span class="right">{{account.jiubi || 0}}</span></div>
                       
                        
                        
                     </div>
                   
                </li>
               
            </ul> 
            
           </v-scroll>

          <div v-if="Object.keys(accountlist).length == 0" class="no_data">
              <img src="../../images/no_data.png" alt="">
          </div> 

        </div>
        <!-- </scroll>  -->
        <transition name="router-slid" mode="out-in">
              <router-view></router-view>
        </transition> 

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>

    </div>
  
</template>

<script>
    import { getMemberVouvherRecord,bindVoucher ,getSellerAccountList} from 'src/service/getData'
    import {mapState,mapMutations} from 'vuex'
    import Scroll from 'src/components/common/pulldown';
    import loading from 'src/components/common/loading'
    import {formatDate} from 'src/config/date.js'

    export default {
        data (){
            return{
               loadingText:'加载中……',
                startRow : 1, // 开始页数
                endRow : 10, // 结束页数
                temporaryAccountList:[],
                accountlist:[],
                memberId:null,
                showLoading: true, //显示加载动画
            }
        },
        created(){
           // this.loadRefreshData();
        },
        mounted(){
            this.token  = this.userInfo.token;
            this.$el.querySelector('.load-more').style.display = 'block';
        
           
            this.getSellerAccountList();
           
        },
        computed:{
             ...mapState([
                'userInfo'
            ]),
             
        },
        filters:{
            formateDate(myTime)
            {
                let time=new Date(myTime);
                return formatDate(time,"yyyy-MM-dd hh:mm:ss");
            }
        },
        components: {
            'v-scroll':Scroll,
            loading,
        },
        methods: {
            accountType(account){

 
              if(account==1)
              {
                    return '商家销售收入';
              }
              else if(account==2)
              {
                    return '用户退款支出';
              }
              else if(account==3)
              {
                    return '商家订货付款支出';
              }
              else if (account==4) 
              {
                    return '商家充值收入';
              }
              else if(account==5)
              {
                    return '商家久币抵用现金支出';
              }
              else if(account==6)
              {
                    return '商家退单订金久币返还收入';
              }
              else if(account==7)
              {
                    return '商家退款收入';
              }
              else if(account==8)
              {
                    return '商家支付余额支出';
              }
              else if(account==9)
              {
                    return '久币兑换凭证';
              }
              else if(account==10)
              {
                    return '下订单送久币';
              }
              else if(account==10)
              {
                    return '充值送久币';
              }
             
               
              },
              //初始化
             init(){
                this.loadingText="";
                this.$el.querySelector('.load-more').style.display = 'block';
                this.temporaryAccountList = [];
                this.accountlist=[];
                this.startRow=1;
                this.endRow=10;
               
                
              },
            
            
         
            //我的兑换记录
            async getSellerAccountList(){
               
                if (this.userInfo && this.userInfo.id) {
                    let data = await getSellerAccountList(this.token,this.startRow,this.endRow);
                    this.temporaryAccountList =  data.data;
                    this.accountlist = this.accountlist.concat(this.temporaryAccountList);
                    if(this.temporaryAccountList.length<10)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                    }
                     this.temporaryAccountList=[];
                }
                this.showLoading = false;
            },
         
            async  onRefresh(done) {
                
                 
               this.init();
           
                let data = await getSellerAccountList(this.token,this.startRow,this.endRow);
                this.temporaryAccountList =  data.data;
                this.accountlist = this.accountlist.concat(this.temporaryAccountList);
                if(this.temporaryAccountList.length<10)
                {
                    this.$el.querySelector('.load-more').style.display = 'none';
                }
                this.temporaryAccountList =[];
              
                done() // call done
            },
            //上拉加载，
           async onInfinite(done){
                this.loadingText='加载中……';
                this.startRow = this.accountlist.length+1;
                this.endRow = this.startRow+10-1;
                let data = await getSellerAccountList(this.token,this.startRow,this.endRow);
                this.temporaryAccountList =  data.data;
                this.accountlist = this.accountlist.concat(this.temporaryAccountList);
                    if(this.temporaryAccountList.length<10)
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';
                         this.loadingText="------";
                    }
                this.temporaryAccountList=[];
                done() // call done
            },


        }
    }
</script>

<style>
  .ir_scroll .inner{margin-bottom: .4rem;}
</style>
<style lang="scss" scoped>
    @import 'src/style/mixin';
    .integral_record_page{padding-bottom: .4rem;}
    .ir_scroll{margin-top: -2.5rem;}
    .time{text-align: center;margin:.26rem 0; font-size: 0; line-height: 0;}
    .time span{ line-height:.4rem;background:rgba(0,0,0,0.3);color:#fff;font-size:.22rem;border-radius:.08rem;padding:0 .1rem;}
    .bill_box{background:#fff;border-radius:.1rem;}
    .bill_box .top{padding:.3rem;font-size:.32rem;color:#333;}
    .bill_box .middle{text-align: center;}
    .bill_box .middle h2{font-size:.28rem;color:#999;}
    .bill_box .middle p{font-size:.36rem;color:#ffa101;margin-top:.18rem;}
    .bill_box .sm{margin-top:.48rem;padding:.24rem;font-size:.28rem;color:#666;border-bottom:.02rem dashed #dfdfdf;}
    .bill_box .sm .right{color:#333;}
    .bill_box .bottom{padding:.24rem;font-size:.28rem;color:#666;}
    .bill_box .bottom .right{color:#333;}
    .no_data{
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        text-align: center; 
        padding-top: 3.5rem; 
        background: #f4f4f4; 
        z-index: 10;
        img{
            width: 1.88rem;
            height: 2.6rem;
        }
    }
</style>